<template>
    <div class="center">
        <div class="middle">
            <div class="top">
                <p>
                    <a-icon type="home"/>
                    首页<span style="padding:0 5px">/</span>视频详情页
                </p>
            </div>
            <div class="course-middle">
                <div class="course1">
                    <div class="coll" @click="login2" v-if="iscoll">
                        <a-icon type="heart"/>
                        <span>收藏</span>
                    </div>
                    <div class="coll" @click="login3" v-else>
                        <a-icon style="color: orange;" type="heart"/>
                        <span style="color: orange;">已收藏</span>
                    </div>
                    <div class="course-img">
                        <img :src="list.bannerFileUrl"
                             alt="">
                    </div>
                    <div class="course-datail">
                        <ul>
                            <li>
                                <h2>{{list.courseTitle}}</h2>
                            </li>
                            <li>
                                <div class="learn">
                                    <span style="margin-right: 10px">累计{{list.participationsCount}}人学习</span>
                                </div>
                                <ul>
                                    <li>
                                        <a-rate :default-value="5" disabled/>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <p v-if="list.isFree==1" class="free"><span>免费</span></p>
                                <div v-else class="fumoney"><span>￥{{list.payPrice}}</span>
                                    <del>￥{{list.coursePrice}}</del>
                                    <p style="width: 80px; height: 20px;">{{list.discountDesc}}</p></div>

                            </li>
                            <li>
                                <a-button v-if="list.isFree!=1" style="margin-right: 20px;background-color: orangered" @click="shopping">立即购买</a-button>
                                <a-button v-if="list.isFree!=1" @click="addshop">加入购物车</a-button>
                                <a-button v-else>立即观看</a-button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <tab2 :list="list" :courseId="$route.query.courseId"></tab2>
    </div>
</template>

<script>
    import tab2 from "../components/tab2"
    import {getcourseDetail} from "../api/api";

    export default {
        name: "detailCourse",
        data() {
            return {
                list: [],
                iscoll:true
            }
        },
        components: {
            tab2
        },
        methods:{
          login2(){
              if(this.$store.state.login){
                  this.$message.info('收藏成功');
                  this.iscoll = false;
              }else {
                  this.$store.commit("change",true)
              }
          },
            login3() {
              let is = this;
                this.$confirm({
                    title: '你确定要取消收藏吗?',
                    okText: '确定',
                    okType: 'danger',
                    cancelText: '取消',
                onOk() {
                   is.iscoll = true;
                    console.log('OK');
                },
                onCancel() {
                    console.log('取消');
                },
            class: 'test',
            });

            },
            addshop(){
              if(this.$store.state.login){
                  this.$store.dispatch("addshopCar",this.$route.query.courseId);
              }else {
                  this.$store.commit("change",true);
              }

            },
            shopping(){
                if(!this.$store.state.login){
                    this.$store.commit("change",true);
                }
            }

        },
        created() {
            getcourseDetail(this.$route.query.courseId).then(res => {
                // console.log(res.data);
                this.list = res.data;
            })
        }

    }
</script>

<style lang="less" scoped>
    .center {
        background-color: #eeeeee;
        overflow: hidden;
    }

    .middle {
        /*background-color: #eeeeee;*/
        width: 1200px;
        margin: 0 auto;

        .top {
            padding: 10px 0 0px;
            padding-left: 5px;
        }

        .course-middle {
            background-color: white;
            height: 271px;

            .course1 {
                padding: 20px;
                position: relative;

                .coll {
                    cursor: pointer;
                    display: inline-block;
                    text-align: center;
                    width: 110px;
                    height: 30px;
                    font-size: 16px;
                    line-height: 26px;
                    border: 1px solid #999;
                    float: right;
                    color: #999;
                    position: absolute;
                    right: 30px;
                    top: 30px;

                    span {
                        margin: 5px;
                    }
                }

                .course-img {
                    width: 387px;
                    height: 220px;
                    float: left;
                    img{
                        height: 215px;
                        width: 337px;
                    }
                }

                .course-datail {
                    width: 600px;
                    height: 231px;
                    float: left;

                    li {
                        margin: 10px 0;
                        font-size: 18px;

                        h2 {
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            height: 36px;
                        }
                    }

                    li:nth-of-type(2) {
                        height: 30px;
                        font-size: 14px;
                        line-height: 36px;

                        .learn {
                            float: left;
                        }


                        ul {
                            float: left;
                            line-height: 30px;

                            li {
                                height: 20px;
                                padding: 0;
                                margin: 0;
                                font-size: 12px;

                            }
                        }
                    }

                    li:nth-of-type(3) {

                        text-align: left;
                        height: 60px;

                    }

                    li:nth-of-type(4) {

                        /deep/ .ant-btn {
                            height: 45px;
                            width: 180px;
                            font-size: 16px;
                            background-color: #42b983;
                            color: white;
                        }

                    }
                }
            }
        }
    }
    .fumoney {
        span {
            margin-right: 10px;
            color: red;
            font-size: 16px;
        }
        p {
            /*float: right;*/
            margin: 10px 0;
            font-size: 14px;
            width: 66px;
            height: 20px;
            line-height: 20px;
            margin-right: 16px;
            text-align: center;
            background-color: #efe2c8;
            border: 1px solid #f3d7a4;
        }
    }
</style>